<template>
    <div class="scoreAll">
        <div class="basicInfo">
            <span>赛事名称：<b>xxx夏季网球大赛</b></span>
            <span>裁判长：<b>刘德华</b></span>
            <div class="btnGroup">
                <el-button type="primary" class='goMatchForm'>导出战表信息</el-button>
                <el-button type="info" plain  @click='goback'>返回</el-button>
            </div>
        </div>
        <div class="tableBox">
         <vddl-list class="panel__body--list" :list="lists" :horizontal="false">
            <vddl-draggable class="panel__body--item" v-for="(item, index) in lists" :key="item.id"
              :draggable="item"
              :index="index"
              :wrapper="lists"
              effect-allowed="move">
              {{item.name}}
            </vddl-draggable>
        </vddl-list>
           <div class="date">
               <span>
                   比赛日期：
               </span>
                <el-date-picker v-model="date" type="date" placeholder="选择日期">
                </el-date-picker>
           </div>
            <table>
                    <thead>
                        <tr>
                            <td>场序</td>
                            <td>1号场地</td>
                            <td>2号场地</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>
                                <vddl-list class="panel__body--list" :list="list[0]" :horizontal="false">
                                    <vddl-draggable class="panel__body--item" v-for="(item, index) in list[0]" :key="item.id"
                                    :draggable="item"
                                    :index="index"
                                    :wrapper="list[0]"
                                    effect-allowed="move">
                                    {{item.name}}
                                    </vddl-draggable>
                                </vddl-list>
                            </td>
                             <td>
                                <vddl-list class="panel__body--list" :list="list[1]" :horizontal="false">
                                    <vddl-draggable class="panel__body--item" v-for="(item, index) in list[1]" :key="item.id"
                                    :draggable="item"
                                    :index="index"
                                    :wrapper="list[1]"
                                    effect-allowed="move">
                                    {{item.name}}
                                    </vddl-draggable>
                                </vddl-list>
                            </td>
                        </tr>
                    </tbody>
                </table>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                date:'',
                lists:[
                    {
                    id: 1,
                    name: 'a'
                    },
                    {
                    id: 2,
                    name: 'b'
                    },
                    {
                    id: 3,
                    name: 'c'
                    },
                    {
                    id: 4,
                    name: 'd'
                    },
                    {
                    id: 5,
                    name: 'e'
                    },
                    {
                    id: 6,
                    name: 'f'
                    },
                ],
                list:[
                    [],[]
                ]
            }
        },
        watch:{
            lists:function(data){
                console.log(data)
            },
            list:function(data){
                for(var i=0;i<data.length;i++){
                    if(data[i].length>1){
                        var flag = data[i][1];
                        this.list[i].slice(0,1);
                    }
                }
            }
        },
        methods:{
            diy(){
                this.hasDiy = true;
            },
            cancle(){
                this.hasDiy = false;
            },
            goback(){

            }
        }
    }
</script>
<style lang="less" scoped>
//
.vddl-list {
  min-height: 24px;
}
//
.scoreAll{
    padding:20px;
    .basicInfo{
        background: rgba(66,185,131,.1);
        border-radius: 2px;
        line-height: 40px;
        height: 40px;
        padding: 15px;
        overflow: hidden;
        span{
            margin-right:20px;
        }
        .btnGroup{
            height: 60px;
            float: right;
            margin-right:20px;
        }
    }
    .tableBox{
        box-shadow: 0px 2px 5px #eaeaea;
        margin-top:20px;
        border:1px solid #eaeaea;
        padding:10px;
        .panel__body--list{
            width: 100%;
            .panel__body--item{
                height: 40px;
                width: 120px;
                border:1px solid #eaeaea;
                box-shadow: 0px 3px 4px #eaeaea;
                float: left;
                line-height: 40px;
                text-align: center;
            }
        }    
        .date{
            padding-left:10px;
        }
        table{
            margin-top:10px;
            width: 100%;
            text-align: center;
            border-collapse:collapse;
            border-left:1px solid #eaeaea;
            border-top:1px solid #eaeaea;
            thead{
                tr{
                    height: 40px;
                    background-color: rgba(66, 185, 131, 0.1);
                    td{
                        border-right:1px solid #eaeaea;
                        border-bottom:1px solid #eaeaea;
                    }
                }
            }
            tbody{
                tr{
                    width: 100%;
                    height: 120px;
                    td{
                        width: 120px;
                        border-right:1px solid #eaeaea;
                        border-bottom:1px solid #eaeaea;
                        input{
                            text-align: center;
                            width: 100px;
                            border:0;
                            height: 30px;
                            line-height: 30px;
                        }
                    }
                }
            }
        }
    }
}
</style>

